<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Simple Layout Demo</title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.layout.js"></script>
<script type="text/javascript" src="jquery.ui.all.js"></script>
<script type="text/javascript" src="complex.js"></script><!-- ONLY for debugData() -->

<script type="text/javascript">

var myLayout; // a var is required because this page utilizes: myLayout.allowOverflow() method

$(document).ready(function () {
	myLayout = $('body').layout({
		applyDefaultStyles: true // add basic styling for testing & demo purposes
	,	west__raisePaneZindexOnHover: true
	});
});

</script>

<style type="text/css">
/*
 *	ALL CSS below is for cosmetics and demo purposes only
 *	Nothing here affects the appearance of the layout
 */

body {
	font-family: Arial, sans-serif;
	font-size: 0.85em;
}
p {
	margin: 1em 0;
}

/*
 *	Rules below are for simulated drop-down/pop-up lists
 */

ul {
	/* rules common to BOTH inner and outer UL */
	z-index:	100000;
	margin:		1ex 0;
	padding:	0;
	list-style:	none;
	cursor:		pointer;
	border:		1px solid Black;
	/* rules for outer UL only */
	width:		15ex;
	position:	relative;
}
ul li {
	background-color: #EEE;
	padding: 0.15em 1em 0.3em 5px;
}
ul ul {
	display:	none;
	position:	absolute;
	width:		100%;
	left:		-1px;
	/* Pop-Up */
	bottom:		0;
	margin:		0;
	margin-bottom: 1.55em;
}
.ui-layout-north ul ul {
	/* Drop-Down */
	bottom:		auto;
	margin:		0;
	margin-top:	1.45em;
}
ul ul li		{ padding: 3px 1em 3px 5px; }
ul ul li:hover	{ background-color: #FF9; }
ul li:hover ul	{ display:	block; background-color: #EEE; }

</style>

</head>
<body>

<!-- manually attach allowOverflow method to pane -->
<div class="ui-layout-north" onmouseover="myLayout.allowOverflow('north')" onmouseout="myLayout.resetOverflow(this)">
	This is the north pane, closable, slidable and resizable

	<ul>
		<li>
			<ul>
				<li>one</li>
				<li>two</li>
				<li>three</li>
				<li>four</li>
				<li>five</li>
			</ul>
			Drop-Down <!-- put this below so IE and FF render the same! -->
		</li>
	</ul>

</div>

<!-- allowOverflow auto-attached by option: west__raisePaneZindexOnHover = true -->
<div class="ui-layout-west">
	This is the west pane, closable, slidable and resizable

	<ul>
		<li>
			<ul>
				<li>one</li>
				<li>two</li>
				<li>three</li>
				<li>four</li>
				<li>five</li>
			</ul>
			Pop-Up <!-- put this below so IE and FF render the same! -->
		</li>
	</ul>

	<p><button onclick="myLayout.close('west')">Close Me</button></p>

</div>

<div class="ui-layout-south">
	This is the south pane, closable, slidable and resizable &nbsp;
	<button onclick="myLayout.toggle('north')">Toggle North Pane</button>
</div>

<div class="ui-layout-east">
	This is the east pane, closable, slidable and resizable

	<!-- attach allowOverflow method to this specific element -->
	<ul onmouseover="myLayout.allowOverflow(this)" onmouseout="myLayout.resetOverflow('east')">
		<li>
			<ul>
				<li>one</li>
				<li>two</li>
				<li>three</li>
				<li>four</li>
				<li>five</li>
			</ul>
			Pop-Up <!-- put this below so IE and FF render the same! -->
		</li>
	</ul>

	<p><button onclick="myLayout.close('east')">Close Me</button></p>

	<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
	<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
	<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
	<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
</div>

<div class="ui-layout-center">
	This center pane auto-sizes to fit the space <i>between</i> the 'border-panes'
	<p>This layout was created with only <b>default options</b> - no customization</p>
	<p>Only the <b>applyDefaultStyles</b> option was enabled for <i>basic</i> formatting</p>
	<p>The Pop-Up and Drop-Down lists demonstrate the <b>allowOverflow()</b> utility</p>
	<p>The Close and Toggle buttons are examples of <b>custom buttons</b></p>
	<p><a href="../demos.html">Go to the Demos page</a></p>
	<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
	<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
	<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
	<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
</div>

</body>
</html>